<template>
  <div ref="threeContainer" style="height:500px"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as THREE from 'three'

const threeContainer = ref(null)

onMounted(() => {
  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
  const renderer = new THREE.WebGLRenderer()

  // 创建四维模型几何体
  const geometry = new THREE.SphereGeometry(5, 32, 32)
  const material = new THREE.MeshBasicMaterial({color: 0x00ff00})
  const sphere = new THREE.Mesh(geometry, material)
  scene.add(sphere)

  camera.position.z = 15
  renderer.setSize(threeContainer.value.offsetWidth, 500)
  threeContainer.value.appendChild(renderer.domElement)

  function animate() {
    requestAnimationFrame(animate)
    sphere.rotation.x += 0.01
    sphere.rotation.y += 0.01
    renderer.render(scene, camera)
  }
  animate()
})
</script>
